<template>
	<view class="all">
		<view class="header">
			<u-tabs active-color="#F0250E" name="cate_name" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<view class="content" v-for="(item,index) in orderList" :key="index">
			<view class="df">
				<view class="orderNumber">
					订单编号：{{item.order.order_no}}
				</view>
				<view class="state">
					<text v-if="
                           (item.order.trade_status == 0 ||
                             item.order.trade_status == 2 ||
                             item.order.trade_status == -1) &&
                           item.order.is_offline != 1
                         "></text>
					<!-- 已完成 -->
					<text v-else-if="item.order.trade_status == 3 && item.order.is_offline != 1">已完成</text>
					<!-- 已取消 -->
					<text v-else-if="item.order.trade_status == 1 && item.order.is_offline != 1">已取消</text>
					<text v-else-if="item.order.trade_status == 0 ||(item.order.trade_status == -1 && item.order.pay_type == 2)">{{$t('order.waitSend')}}</text>
					<text v-else-if="item.order.trade_status == 2">{{$t('order.waitTake')}}</text>
				</view>
			</view>
			<view class="orderTime">
				下单时间：{{ formatDate(item.created_at) }}
			</view>
			<view class="df_a mt24" v-for="(item1,index1) in item.order_detail" :key="index1">
				<u-image width="166rpx" height="166rpx" border-radius="10rpx" :src="item1.pic"></u-image>
				<view class="" style="margin-left: 20rpx;">
					<view class="productIntroduction">
						{{item1.goods_name}}
					</view>
					<view class="flex_sw">
						<view class="" style="width: 400rpx;display: flex;align-items: center;flex-wrap: wrap;">
							<view class="sku-item " v-for="(attr, attr_index) in item1.attr" :key="attr_index">
								{{ attr.attr_group_name }} ：{{ attr.attr_name }}
								<text style="padding: 0rpx 10rpx;" v-if="item1.attr.length - 1 > attr_index"
									class="sku-line"> | </text>
							</view>
						</view>
						<view class="num">
							x{{item1.num}}
						</view>
					</view>
					<view class="price1">
						￥{{item1.total_price}}
					</view>
				</view>
			</view>
			<view class="df_a_c footer">
				<view class="" style="display: flex; align-items: center;">
					<u-image width="48rpx" height="48rpx" shape="circle" :src="item.order_saas_user.avatar"></u-image>
					<view class="name">
						{{item.order_saas_user.name}}
					</view>
				</view>
				<view class="moey">
					{{item.is_send==0?'未到账':'已到账'}}：<text class="F0250E">¥{{item.money}}</text>
				</view>
			</view>
		</view>
		<view style="padding:30rpx 0">
			<u-loadmore :status="noMore ? 'nomore': 'loadmore'" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				list: [{
					cate_name: '全部'
				}, {
					cate_name: '已到账'
				}, {
					cate_name: '未到账'
				}],
				current: 0,
				noMore: false,
				page: 1,
				orderList: [],
				limit: 10
			}
		},
		onLoad(option) {
			// 动态修改标题
			this.type = option.type
			let titleBar = ''
			if (this.type == 11) {
				titleBar = '业绩奖订单'
			} else if (this.type == 12) {
				titleBar = '培训津贴'
			} else if (this.type == 13) {
				titleBar = '育人奖订单'
			} else {
				titleBar = '感恩奖订单'
			}
			uni.setNavigationBarTitle({
				title: titleBar
			});
			// 获取列表数据
			this.getList()
		},
		onReachBottom() {
			this.getList(true);
		},
		methods: {
			async getList(isBottom) {
				let newCurrent = null
				if (this.current == 0) {
					newCurrent = -1
				} else if (this.current == 1) {
					newCurrent = 1
				} else {
					newCurrent = 0
				}

				// 已经到底
				if (this.noMore) return
				// 触底更新数据
				if (isBottom) {
					this.page++
				}
				const res = await this.$allrequest.teamCenter.temOrder({
					type: this.type,
					is_send: newCurrent,
					_get_order: 1,
					page: this.page,
					limit: this.limit
				});
				if (res.code == 0) {
					// 循环并转换 JSON 字符串
					res.data.list.forEach(item => {
						item.order_detail.forEach(detail => {
							// 解析 attr 字符串为 JSON 对象
							try {
								detail.attr = JSON.parse(detail.attr);
							} catch (error) {
								console.error(`解析 JSON 时出错: ${error}`);
							}
						});
					});
					this.orderList.push(...res.data.list)
					this.noMore = res.data.totalCount <= this.page * this.limit
				}
			},
			formatDate(timestamp) {
				// 将时间戳转换为毫秒
				let date = new Date(timestamp * 1000);
				// 获取年、月、日、时、分、秒
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
				let day = date.getDate().toString().padStart(2, '0');
				let hours = date.getHours().toString().padStart(2, '0');
				let minutes = date.getMinutes().toString().padStart(2, '0');
				let seconds = date.getSeconds().toString().padStart(2, '0');

				// 返回格式化的字符串
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			change(index) {
				this.current = index;
				this.page = 1
				this.noMore = false
				this.orderList = []
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.all {
		min-height: 100vh;
		background-color: #F2F2F2;
	}

	.header {
		padding-bottom: 10rpx;
		background-color: #FFF;
		position: sticky;
		top: 0;
		z-index: 1000;
		/* 确保 z-index 高于其他组件 */
	}

	.df {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.df_a {
		display: flex;
		justify-content: space-between;
	}

	.df_a_c {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		width: 702rpx;
		background: #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		padding: 24rpx;
		margin: 24rpx auto;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.orderNumber {
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
	}

	.state {
		font-weight: 400;
		font-size: 24rpx;
		color: #F0250E;
	}

	.productIntroduction {
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		width: 470rpx;
		white-space: nowrap;
		/* 不允许文本换行 */
		overflow: hidden;
		/* 文本超出容器时裁剪 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.num {
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
	}

	.price1 {
		font-weight: 600;
		font-size: 26rpx;
		color: #262626;
		margin-top: 14rpx;
	}


	.footer {
		padding: 20rpx 0rpx 0rpx 0rpx;
		margin-top: 40rpx;
		border-top: 1px solid #F8F8F8;
		font-family: PingFang SC, PingFang SC;
	}

	.footer .name {
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		width: 280rpx;
		margin-left: 15rpx;
	}

	.footer .moey {
		font-weight: 600;
		font-size: 26rpx;
		color: #262626;
	}

	.F0250E {
		color: #F0250E;
	}

	.mores {
		padding: 24rpx 0rpx;
	}

	.flex_sw {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;

		.text {
			width: 326rpx;
			height: 68rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #8C8C8C;
		}
	}

	.orderTime {
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		padding: 24rpx 0rpx 0rpx 0rpx;
		border-top: 1rpx solid #F8F8F8;
		margin-top: 24rpx;
	}

	.mt24 {
		margin-top: 24rpx;
	}
</style>